<template>
	<view class="">
		<view class="my_spell_category">
			<view class="category-item" v-for="(item, index) in statusList" :key="index" @click="categoryChange(item.id)">
				<view class="item-con" :class="item.id == status ? 'active ns-text-color ns-bg-before' : ''">{{ item.name }}</view>
			</view>
		</view>

		<mescroll-uni @getData="getData" top="80" ref="mescroll" :size="10">
			<block slot="list">
				<block v-if="checkList.length">
					<!-- 平台审核 -->
					<view class="list-boxs" v-for="(item ,index) in checkList" :key="index">

						<view class="title-list-box">
							<!-- 审核时间 -->
							<text> {{$util.timeStampTurnTime(item.apply_time)}} </text>
							<text v-if="item.check_status == 0 " class="wait-color">待审核</text>
							<text v-if="item.check_status == 1 " class="refuse-color">已拒绝</text>
							<text v-if="parseInt(item.check_status) >= 2" class="success-color">已通过</text>
						</view>
						<view class="">
							<view class="check-info">
								<text>{{item.username}} 申请成为代理商</text>
							</view>
						</view>
						<view class="">
							<view v-if="item.check_status == 0 " class="button-box">
								<!-- <input type="text" value="" placeholder="请输入理由" v-model="reason" /> -->
								<text class="success-button" @click="openPopup(index)">拒绝</text>
								<text class="refuse-button" @click="agentCheck(1,item.id,item.member_id)">同意</text>
							</view>

							

						</view>
						<view :class="item.check_status <= 3 ?'footer-box padding-bottom':''">
							<view v-if="item.check_status == 4 " class="success-color">平台审核通过</view>
							<!-- <view v-if="item.check_status == 1 " class="refuse-color">上级拒绝</view> -->
							<view v-if="item.check_status == 3 ||item.check_status == 5" class="refuse-color">平台拒绝</view>
							<view v-if="parseInt(item.check_status) == 2 " class="success-status">等待平台审核</view>
							<view v-if="item.check_status == 1 || item.check_status == 3 || item.check_status == 5 " class="">
								拒绝理由
							</view>
							<!-- 代理审核拒绝理由 -->
							<view v-if="item.check_status == 1  " class="refuse-info">
								{{item.superior_reject_reason}}
							</view>
							<!-- 后台审核拒绝理由 -->
							<view v-if=" item.check_status == 3 || item.check_status == 5 " class="refuse-info">
								{{item.admin_reject_reason}}
							</view>
						</view>

					</view>
					
					
					<uni-popup ref="skuPopup" type="center">
						<view class="prop_view">
							<view class="title">拒绝理由</view>
							<input type="text" placeholder="请输入拒绝理由" class="ns-text-color-gray-lighten ns-margin-bottom"
							 placeholder-class="ns-text-color-gray-lighten" v-model="reason" />
							<view class="btn_group ns-border-color-gray">
								<view class="cancle-btn btn-item ns-text-color-gray-lighten ns-border-color-gray color-gray" @click="closePopup()">取消</view>
								<view class="confirm-btn btn-item ns-text-color" @click="delClass()">确定</view>
							</view>
						</view>
					</uni-popup>
					
				</block>
				<block v-else>
					<ns-empty text="暂无数据" :isIndex="!1"></ns-empty>
				</block>
			</block>
		</mescroll-uni>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup-sku.vue';
	export default {
		components: {
			uniPopup
		},
		filters: {
			formatDate: function(value) {
				var date = new Date();
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
		},
		data() {
			return {
				mescroll: null,
				status: 'all',
				statusList: [{
						id: 'all',
						name: '全部'
					},
					{
						id: 0,
						name: '待审核'
					},
					{
						id: 2,
						name: '已通过'
					},
					{
						id: 1,
						name: '已拒绝'
					},

				],

				checkList: [],
				reason: '', //理由
				id: 0, //member_id
				option: '',
				//拒绝弹框的索引
				refusePopupIndex:0,
			}
		},
		onShow() {
			this.info()
		},
		methods: {
			openPopup(index){
				this.$refs.skuPopup.open()
				this.refusePopupIndex = index;
			},
			closePopup(){
				this.$refs.skuPopup.close(true)
			},
			// 确定
			delClass() {
				let item = this.checkList[this.refusePopupIndex];
				let id = item.id;
				let member_id = item.member_id;
				if (this.reason.trim() == 0) {
					this.$util.showToast({
						title: `请输入拒绝理由`,
					});
					return false
				}
				this.$api.sendRequest({
					url: '/platformpintuan/api/Pintuantrader/agentCheck',
					data: {
						id: id,
						member_id: member_id,
						reason: this.reason,
						option: 2,
					},
					success: res => {
						if (res.code == 0) {
							this.$util.showToast({
								title: res.message,
							});
							this.$refs.mescroll.refresh();
						} else {
							this.$util.showToast({
								title: res.message,
							});
						}
					},


				});
				this.$refs.skuPopup.close(true);
				this.$refs.mescroll.refresh()
				//this.getData()
			},

			//切换分类
			categoryChange(e) {
				this.status = e;
				this.mescroll.resetUpScroll();
				this.$refs.mescroll.refresh()
			},

			getData(mescroll) {
				this.mescroll = mescroll;
				this.$api.sendRequest({
					url: '/platformpintuan/api/Pintuantrader/checkList',
					data: {
						page_size: mescroll.size,
						page: mescroll.num,
						status: this.status
					},
					success: res => {
						// console.log(res);
						let newArr = [];
						if (res.code == 0) {
							newArr = res.data.list;
						}
						mescroll.endSuccess(this.checkList);

						//设置列表数据
						if (mescroll.num == 1) this.checkList = []; //如果是第一页需手动制空列表

						// console.log(newArr);
						this.checkList = this.checkList.concat(newArr); //追加新数据
						// this.$refs.mescroll.refresh();
					},

				});
				// this.$refs.mescroll.refresh()
			},


			info() {
				this.$api.sendRequest({
					url: '/api/member/detail',
					data: {},
					success: res => {
						if (res.code >= 0) {
							this.id = res.data.member_id
						}
					},
				});
			},
			// 代理商审核下级申请
			agentCheck(option, id, member_id) {
				if(option == 1){
					uni.showModal({
						title: '提示',
						content: '确定要同意下级的代理商申请吗？',
						success: (res) => {
							if (res.confirm) {
								this.$api.sendRequest({
									url: '/platformpintuan/api/Pintuantrader/agentCheck',
									data: {
										id: id,
										member_id: member_id,
										reason: this.reason,
										option: option,
									},
									success: res => {
										if (res.code == 0) {
											this.$util.showToast({
												title: res.message,
											});
											this.mescroll.resetUpScroll();
										} else {
											this.$util.showToast({
												title: res.message,
											});
										}
									},
								});
							}
						}
					});
				}
			}

		}


	}
</script>

<style lang="scss" scoped>
	.refuse-color {
		color: #FF3366 !important;
	}

	.success-color {
		color: #25D982 !important;
	}

	.wait-color {
		color: #FFA652 !important;
	}

	/deep/.refuse-popup {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.refuse-popup {
			// font-size: 20rpx;
		}
	}

	/deep/.list-boxs {
		margin: 20rpx 30rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 0rpx 31rpx;
		border-radius: 10rpx;

		.title-list-box {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #FFEEEEEE;
			height: 100rpx;
			line-height: 100rpx;

			text {
				color: #FF909399;
				font-size: 28rpx;
			}
		}

		.button-box {
			display: flex;
			justify-content: flex-end;
			box-sizing: border-box;

			text {
				display: inline-block;
				width: 100rpx;
				height: 46rpx;
				line-height: 46rpx;
				border-radius: 10rpx;
				margin-right: 32rpx;
				margin-bottom: 42rpx;
				text-align: center;
			}

			.success-button {
				border: 1rpx solid #CCCCCC;
			}

			.refuse-button {
				background-color: #FF4249;
				color: #FFFFFF;
			}
		}

		.check-info {
			margin: 39rpx 0 62rpx 0;
		}

		.success-status {
			color: #FFA957;
			padding-bottom: 37rpx;
		}

		.refuse-info {
			line-height: 70rpx;
			padding-left: 25rpx;
			background: #F8F8F8;
			border: 0px solid #2B2F30;
		}

	}

	/deep/.footer-box {
		padding-top: 32rpx 0 !important;
	}

	.my_spell_category {
		width: 100%;
		height: 70rpx;
		display: flex;
		background: #ffffff;

		.category-item {
			flex: 1;
			height: 100%;
			text-align: center;

			.item-con {
				display: inline-block;
				height: 64rpx;
				font-size: $ns-font-size-sm;
				position: relative;
				line-height: 64rpx;
			}

			.item-con.active:after {
				content: '';
				display: block;
				width: 100%;
				height: 6rpx;
				border-radius: 6rpx;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}



	.prop_view {
		padding: 30rpx 0rpx 0;
		width: 70vw;
		background: #FFFFFF
	}

	.prop_view input {
		// border-bottom: 1px solid;
		padding: $ns-padding;
		margin: 0 30rpx;
	}

	.prop_view .title {
		text-align: center;
		font-size: 32rpx;
		margin-bottom: 30rpx;
	}

	.tip {
		text-align: center;
		padding: 30rpx 0;
	}

	.btn_group {
		display: flex;
		text-align: center;
		border-top: 1px solid;

		.btn-item {
			flex: 1;
			height: 96rpx;
			border-radius: 6rpx;
			line-height: 96rpx;
			color: #fff;
			text-align: center;
		}

		.color-gray {
			color: #CCCCCC
		}

		.cancle-btn {
			border-right: 1px solid;
			flex: 1;
		}

		.submit-btn {
			flex: 1;
		}

		.confirm-btn {}
	}

	/deep/.padding-bottom {
		padding-bottom: 32rpx;
	}
</style>
